<script setup>
import Header from "../components/HeaderVue.vue";
import { ref } from "vue";
import router from "../../router/index.js";
import {isPermission} from "../../utils/utils.js";

// 默认高亮
const defaultActive = ref("/course/chapter");
// 课程id
const courseId = ref('');
// 进入页面时获取到courseId，并且保存到localStorage中
// 持久化课程id,防止刷新丢失
courseId.value = localStorage.getItem("courseId");
console.log(courseId.value);




</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 顶部，放头像 -->
      <el-header>
        <el-affix>
          <div class="header-outer">
            <Header></Header>
          </div>
        </el-affix>
      </el-header>
      <!-- 主体 -->
      <el-container>
        <el-main >
          <el-card class="card">
            <router-view :courseId="courseId"></router-view>
          </el-card>
        </el-main>
        <!-- 侧边，放导航栏 -->
        <el-affix :offset="100">
          <el-aside width="200px" class="aside-outer">
            <el-menu
                :default-active="defaultActive"
                active-text-color="#000000"
                background-color="#409eff"
                text-color="#ffffff"
                :router="true"
            >
<!--              <el-menu-item index="/course/home">主页</el-menu-item>-->
              <el-menu-item index="/course/chapter">章节</el-menu-item>
              <el-menu-item index="/course/task">任务</el-menu-item>
              <el-menu-item index="/course/exams">考试</el-menu-item>
              <el-menu-item index="/course/resources">资料</el-menu-item>
              <el-menu-item index="/course/assignment">作业</el-menu-item>
<!--              <el-menu-item index="3">通知</el-menu-item>-->
              <el-menu-item index="/course/classmanage/classtable" v-if="isPermission(2)">班级管理</el-menu-item>
            </el-menu>
          </el-aside>
        </el-affix>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.common-layout {
  background: -moz-linear-gradient(to bottom, #f3f5f8, #fff);
  background: linear-gradient(to bottom, #f3f5f8, #fff);
  overflow: hidden;
  .header-outer {
    height: 100%;
    background-color: #fff;
    border-bottom: 2px solid #eee;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
  }
}

.aside-outer {
  background-color: #409eff;
  height: 80vh;
  border-radius: 20px;
}

.card {
  margin-top: 1em;
  min-height: 80vh;
  border-radius: 20px;
}
</style>
